<template>
  <div>
    <div class="infinite-list-wrapper">
      <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="30">
        <li v-for="i in list" :id="i.aid" :key="i.aid" class="list-item">
          {{ i.aid }}
        </li>
      </ul>
    </div>

    <div class="foot">
      底部
    </div>
  </div>
</template>

<script>
import _uniqBy from 'lodash/uniqBy'
export default {
  /* async asyncData ({ $axios }) {
    const [list] = await Promise.all([
      $axios.get('/api/appapi.php?a=getPortalList&catid=20&page=1')
    ])
    return {
      list: list.result || []
    }
  }, */
  data () {
    return {
      busy: false,
      page: 1,
      list: []
    }
  },
  methods: {
    async loadMore () {
      // 如果是第一页，就终止请求，这个只有第一页数据是ssr才使用
      // if (this.page === 1) {
      //   this.page = 2
      //   return false
      // }

      const res = await this.$axios.get('http://www.phonegap100.com/appapi.php?a=getPortalList', {
        params: {
          catid: 20,
          page: this.page
        }
      })
      if (res) {
        console.log(res, '===')
        ++this.page
        this.list = _uniqBy(this.list.concat(res.result), 'aid')
        if (res.result.length < 20 && this.page !== 1) {
          this.busy = true
          console.log('没有数据了')
          alert('没有数据了')
        }
      }
    }
  }
}
</script>
<style scoped>
.infinite-list-wrapper{
  /* width: 1300px; */
  margin: 0 auto;
}
ul{
  margin: 0 40px;
}
li{
  height: 42px;
}
.foot{
  background: #ccc;
  height: 150px;
}
</style>
